<template>
    <div class="swiper-container" id="swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="box" v-for="(item,index) in naviList" :key="index">
                    <img :src="item.src" alt="">
                    <div class="title">{{item.title}}</div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="box" v-for="(item,index) in naviList1" :key="index">
                    <img :src="item.src" alt="">
                    <div class="title">{{item.title}}</div>
                </div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
import 'swiper/css/swiper.min.css'//类似link加在css文件
import swiperNa from 'swiper'//类似<script src="">加在js文件
export default {
    data:function(){
        return{
           naviList:[{
               src:require('../assets/images/icon/1.png'),
               title:'京东超市'
           },{
               src:require('../assets/images/icon/2.png'),
               title:'京东生鲜'
           },{
               src:require('../assets/images/icon/3.png'),
               title:'京东服饰'
           },{
               src:require('../assets/images/icon/4.png'),
               title:'鱼唇人类'
           },{
               src:require('../assets/images/icon/5.png'),
               title:'京东到家'
           },{
               src:require('../assets/images/icon/6.png'),
               title:'充值缴费'
           },{
               src:require('../assets/images/icon/7.png'),
               title:'9.9元拼'
           },{
               src:require('../assets/images/icon/8.png'),
               title:'领券'
           },{
               src:require('../assets/images/icon/9.png'),
               title:'赚钱'
           },{
               src:require('../assets/images/icon/10.png'),
               title:'物流查询'
           }],
           naviList1:[{
               src:require('../assets/images/icon/66/1.jpg'),
               title:'城'
           },{
               src:require('../assets/images/icon/66/2.jpg'),
               title:'市'
           },{
               src:require('../assets/images/icon/66/3.jpg'),
               title:'套'
           },{
               src:require('../assets/images/icon/66/4.jpg'),
               title:'路'
           },{
               src:require('../assets/images/icon/66/5.jpg'),
               title:'深'
           },{
               src:require('../assets/images/icon/66/6.jpg'),
               title:'我'
           },{
               src:require('../assets/images/icon/66/7.jpg'),
               title:'要'
           },{
               src:require('../assets/images/icon/66/8.jpg'),
               title:'回'
           },{
               src:require('../assets/images/icon/66/9.jpg'),
               title:'农'
           },{
               src:require('../assets/images/icon/66/10.jpg'),
               title:'村'
           }]
        }
    },
    mounted(){
        var mySwiper = new swiperNa ('#swiper2', { 
            // 如果需要分页器
            autoplayDisableOnInteraction:false,
            pagination: {
            // el: '.swiper-pagination',
            el: '.swiper-pagination',
            dynamicBullets: true,
            }
        })
    },
    methods:{

    }
}
</script>

<style lang="less" scoped>
    #swiper2{
        width: 100%;
        height: 162px;
        // background: skyblue;

        .swiper-wrapper{
            width: 100%;
            
            .swiper-slide{
                width: 100%;
                overflow: hidden;
                zoom: 1;
                
                .box{
                    width: 20%;
                    height: 73px;
                    // background: pink;
                    text-align: center;
                    float: left;

                    img{
                        margin-top:8px; 
                        width: 40px;
                        height: 40px;
                    }
                    .title{
                        margin-top:2px;
                        font-size: 12px; 
                    }
                }
            }
        }
    }
</style>